<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My播放器</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding-top:85px;">

<nav class="navbar navbar-fixed-top" style="background-color:white;">
    <div class="row text-center" style="margin-top: 15px;">

        <button id="restart" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-play"
                                                                          aria-hidden="true"/>
        </button>

        <button id="pause" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-pause"
                                                               aria-hidden="true"/>
        </button>

        <button id="next" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-fast-forward"
                                                               aria-hidden="true"/>
        </button>

        <button id="volumeDown" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-volume-down"
                                                                     aria-hidden="true"/>
        </button>
        <button id="volumeUp" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-volume-up"
                                                                   aria-hidden="true"/>
        </button>
    </div>

    <div class="row text-center" style="margin-top: 10px; margin-bottom: 15px;">
        当前播放：<span id="playingMusic"></span><span id="time-ticker" style="margin-left: 10px;"></span>
    </div>
</nav>

<div class="container-fluid">
    <div>
        <table class="table table-striped table-hover">
            <tbody id="table-body">
            <tr>
                <td></td>
                <td><a href="javascript:void(0);" class="btn-play" music-name="" onclick="play(this);"></a>
                </td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="row text-center" style="margin-top: 40px; margin-bottom: 10px;">
        <input id="password" type="text" name="password" placeholder="关机密码">
        <button id="shutdown" class="btn btn-danger btn-sm">关机</button>
    </div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/statics/js/time-ticker.js"></script>
<script language="JavaScript">

    var lastUpdateTime = 0;
    var tm;

    function play(e) {
        var musicName = $(e).attr("music-name");

        $.ajax({url: "/player/play/" + musicName, async: false});
    }

    function waitForPlayerStatusChange() {
        $.ajax({
            url: "/longPolling/playerStatus/" + lastUpdateTime,
            async: true,
            timeout: 50000,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "0") {

                    $("#playingMusic").text(data.info.playingMusicName);

                    lastUpdateTime = data.updateTime;

                    var st = data.info.playerStatus;
                    if (st == "Playing") {
                        $("#pause").show();
                        $("#restart").hide();

                        tm.setPlayingSecond(data.info.curSecond);
                        tm.setTotalSecond(data.info.totalSecond);
                        tm.start();
                    } else {
                        $("#pause").hide();
                        $("#restart").show();

                        tm.setPlayingSecond(data.info.curSecond);
                        tm.setTotalSecond(data.info.totalSecond);
                        tm.stop();
                    }
                }

                waitForPlayerStatusChange();
            },

            error: function (data, status, e) {
                setTimeout("waitForPlayerStatusChange()", 5000);
            }
        });
    }

    $(function () {

        if (tm != null) {
            tm.stop();
        }
        tm = new time_ticker($("#time-ticker")[0]);

        $.ajax({
            url: "/ajax/listAll", async: false,

            success: function (data, textStatus, jqXHR) {
                if (data.ret == "0") {
                    var $ln = $("#table-body tr:eq(0)");
                    var i = data.list.length;
                    data.list.forEach(function (e) {

                        var $nn = $ln.clone()
                        $nn.find("td:eq(0)").text(i);
                        $nn.find("td:eq(2)").text(e.timeLengthInMinuteFormat);

                        var $btn = $nn.find("a.btn-play");
                        $btn.attr("music-name", e.name);
                        $btn.text(e.name);

                        $ln.after($nn);

                        i--;
                    });

                    $ln.hide();
                }
            }
        });

        $("#restart").click(function () {
            $.ajax({url: "/player/start", async: true});
        });

        $("#pause").click(function () {
            $.ajax({url: "/player/pause", async: true});
        });

        $("#next").click(function () {
            $.ajax({url: "/player/next", async: true});
        });

        $("#volumeUp").click(function () {
            $.ajax({url: "/player/volume/5", async: true});
        });

        $("#volumeDown").click(function () {
            $.ajax({url: "/player/volume/-5", async: true});
        });

        $("#shutdown").click(function () {
            if ($("#password").val() == "ok") {
                $.ajax({url: "/ajax/shutdownComputer", async: false});
            }
        });

        waitForPlayerStatusChange();


//    function loadPlayerStatus() {
//        $.ajax({
//            url: "/ajax/playerStatus", async: true,
//
//            success: function (data, textStatus, jqXHR) {
//                if (data.ret == "0") {
//                    $("#playingMusic").text(data.status.playingMusicName);
//                }
//            }
//        });
//    }
//        loadPlayerStatus();
//        setInterval("loadPlayerStatus()", 3000);

    });
</script>
</html>